<template>
	<div class="index">
		<div class="indHead">
			<router-link :to=" '/city' " >
				<span class="city">阿拉善左阿拉善左</span>
			</router-link>
			<span class="filter" @click="isshow= !isshow">筛选</span>
			<div class="indHead-tab">
				<router-link to="/index/hot"><span>聊儿</span></router-link>
			</div>
			<transition name="slide">
				<div class="slideBody" v-show="isshow">
					<ul  class="slideDown-filter clearfix">
						<li @click="getListAll">
							<img src="/static/images/filterIco1.png" alt="" />
							<p class="sf-tit">全部</p>
						</li>
						<li @click="getListWoman">
							<img src="/static/images/filterIco2.png" alt="" />
							<p class="sf-tit">女生</p>
						</li>
						<li @click="getListAllMan">
							<img src="/static/images/filterIco3.png" alt="" />
							<p class="sf-tit">男生</p>
						</li>
					</ul>
				</div>
			</transition>
			
		</div>
		
		
		<div class="indBody">
			<ul class="indCon1 clearfix">
				<li v-for="(item, index) in list" :key="index">
					<router-link :to="'/index/anchor/' + item.room_id">
						<div class="anchor" :style="{backgroundImage: 'url(' + item.img + ')' }">
							<div class="anchorTop clearfix">
								<div v-if="item.anchorMes1">
									<span class="anchorIco1">{{item.anchorMes1}}</span>
								</div>
								<div v-if="item.anchorMes2">
									<span class="anchorIco2">{{item.anchorMes2}}</span>
								</div>
								<div v-if="item.anchorMes3">
									<span class="anchorIco3">{{item.anchorMes3}}</span>
								</div>
							</div>
							<div class="anchorBottom clearfix">
								<span class="fl anchorName">{{item.name}}</span>
								<div class="fr">
									<span class="online" v-if="item.online">当前在线</span>
									<span class="notOnline" v-else>{{item.minute}}分钟前</span>
								</div>
							</div>
						</div>
					</router-link>
				</li>
			</ul>
		</div>
		
		<Tabbar></Tabbar>
		
		<!--弹窗-->
		<yd-popup v-model="eject" position="center" width="76%">
            <div class="eject">
                <div class="ejectHead">
                	<p class="ejectHead-tit">恭喜</p>
                	<p class="ejectHead-des">获得3枚邀请码<br />可以邀请小伙伴一起动起来</p>
                	<p class="ejectHead-bot">(可在个人中心查找未使用的邀请码)</p>
                </div>
                <div class="ejectBody">
                	<ul class="invitation">
                		<li class="clearfix">
                			<span class="fl">1QAZ1QAZ</span>
                			<button class="tag-read fr" data-clipboard-text="1QAZ1QAZ" @click="copy">复制</button>
                		</li>
                		<li class="clearfix">
                			<span class="fl">2WSX2WSX</span>
                			<button class="tag-read fr" data-clipboard-text="2WSX2WSX" @click="copy">复制</button>
                		</li>
                		<li class="clearfix">
                			<span class="fl">3EDC3EDC</span>
                			<button class="tag-read fr" data-clipboard-text="3EDC3EDC" @click="copy">复制</button>
                		</li>
                	</ul>
                	
                	<router-link class="invitationBtn" to="/">去邀请</router-link>
                </div>
                <p style="text-align: center;margin-top: 0.23rem;">
					<yd-button class="closeBtn" @click.native="eject = false"></yd-button>
                </p>
            </div>
        </yd-popup>
		
	</div>
	
</template>

<script  type="text/babel">
	import Tabbar from "./footer.vue"
	import Clipboard from 'clipboard'
	
	export default{
		components:{
    		Tabbar
    	},
		data() {
            return {
                isshow:false,
                eject:false,
                list: [
                    {img: "//img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播1", online: true, minute: 0},
                    {img: "//img1.shikee.com/try/2016/06/21/10172020923917672923.jpg",room_id:124,anchorMes1:0,anchorMes2:18,anchorMes3:18, name: "主播2", online: true, minute: 0},
                    {img: "//img1.shikee.com/try/2016/06/23/15395220917905380014.jpg",room_id:125,anchorMes1:18,anchorMes2:0,anchorMes3:18, name: "主播3", online: true, minute: 0},
                    {img: "//img1.shikee.com/try/2016/06/25/14244120933639105658.jpg",room_id:123,anchorMes1:0,anchorMes2:0,anchorMes3:18, name: "主播4", online: true, minute: 0},
                    {img: "//img1.shikee.com/try/2016/06/26/12365720933909085511.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播5", online: true, minute: 0},
                    {img: "//img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播6", online: true, minute: 0},
                    {img: "//img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播7", online: true, minute: 0},
                    {img: "//img1.shikee.com/try/2016/06/21/10172020923917672923.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播8", online: true, minute: 0},
                    {img: "//img1.shikee.com/try/2016/06/23/15395220917905380014.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播9", online: true, minute: 0},
                    {img: "//img1.shikee.com/try/2016/06/25/14244120933639105658.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播10", online: false, minute: 1},
                    {img: "//img1.shikee.com/try/2016/06/26/12365720933909085511.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播11", online: false, minute: 2},
                    {img: "//img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播12", online: false, minute: 3},
                    {img: "//img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播13", online: false, minute: 4},
                    {img: "//img1.shikee.com/try/2016/06/21/10172020923917672923.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播14", online: false, minute: 5},
                    {img: "//img1.shikee.com/try/2016/06/23/15395220917905380014.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播15", online: false, minute: 6},
                    {img: "//img1.shikee.com/try/2016/06/25/14244120933639105658.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播16", online: false, minute: 7},
                    {img: "//img1.shikee.com/try/2016/06/26/12365720933909085511.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播17", online: false, minute: 8},
                    {img: "//img1.shikee.com/try/2016/06/19/09430120929215230041.jpg",room_id:123,anchorMes1:18,anchorMes2:18,anchorMes3:18, name: "主播18", online: false, minute: 9}
                ],
            }
        },
        mounted(){
        	//请求数据监听状态，如果第一次eject为true
        	//this.eject = true
        },
        methods:{
        	slideDown_filter(){
        		if (this.isshow == false) {
        			this.isshow = true;
        		} else{
        			this.isshow = false;
        		}
        	},
        	getListAll(){
        		//请求全部的列表
        		console.log(1)
        		this.isshow = false;
        	},
        	getListWoman(){
        		//请求女生的列表
        		console.log(2)
        		this.isshow = false;
        	},
        	getListAllMan(){
        		//请求男生的列表
        		console.log(3)
        		this.isshow = false;
        	},
        	copy() {
		        var clipboard = new Clipboard('.tag-read')
		        clipboard.on('success', e => {
		          console.log('复制成功')
		          // 释放内存
		          clipboard.destroy()
		        })
		        clipboard.on('error', e => {
		          // 不支持复制
		          console.log('该浏览器不支持自动复制')
		          // 释放内存
		          clipboard.destroy()
		        })
		    }
        }
       
	}
</script>

<style>
	.index{padding-top: 0.45rem;padding-bottom: 0.5rem;}
	.index .indHead{background-color: #FF5959;height: 0.45rem;position: fixed;top: 0;left: 0;width: 100%;text-align: center;z-index: 10;}
	.index .city{position: absolute;left: 0.2rem;top: 0;line-height: 0.45rem;font-size: 0.14rem;color: #FFC8C8;padding-left: 0.2rem;background-image: url(../../../assets/icon/location.png);background-size: 0.135rem 0.18rem;background-repeat: no-repeat;background-position: 0 50%;width: 0.9rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
	.index .filter{position: absolute;top: 0;right: 0.2rem;line-height: 0.45rem;color: #FFC8C8;font-size: 0.14rem;}
	.index .indHead-tab{line-height: 0.45rem;font-size: 0.16rem;}
	.index .indHead-tab span{line-height: 0.18rem;color: #FFC8C8;position: relative;margin: 0px 0.06rem;display: inline-block;}
	.index .indHead-tab span.active{color: #fff;}
	.index .indHead-tab span.active:after{content: "";width: 70%;height: 0.03rem;position: absolute;background-color: #fff;left: 15%;bottom: -7px;border-radius: 60px;}
	.index .anchor{background-size: cover;position: relative;width: 100%;height: 100%;}
	.index .indCon1{padding: 0.05rem;}
	.index .indCon1 li{float: left;margin-bottom: 0.05rem;height: 1.4rem;width: calc((100% - 0.05rem) / 2);}
	.index .indCon1 li:nth-child(2n){float: right;}
	.index .anchorBottom{position: absolute;bottom: 0.1rem;left: 0;width: 100%;padding: 0px 0.1rem;}
	.index .anchorName{font-size: 0.16rem;color: #fff;line-height: 0.16rem;}
	.index .online{font-size: 0.08rem;color: #fff;background-color: #43bd31;line-height: 0.16rem;border-radius: 100px;display: inline-block;width: 0.48rem;text-align: center;}
	.index .notOnline{font-size: 0.08rem;color: #fff;background-color: #bababa;border-radius: 100px;display: inline-block;width: 0.48rem;text-align: center;line-height: 0.16rem;}
	.index .anchorTop{padding: 0.06rem 0.06rem 0px;}
	.index .anchorTop div{float: left;width: 0.41rem;height: 0.18rem;text-align: center;background-color: rgba(0,0,0,0.4);line-height: 0.18rem;border-radius: 100px;color: #fff;font-size: 0.1rem;margin-right: 0.04rem;}
	.index .anchorTop div span{padding-left: 0.14rem;display: inline-block;vertical-align: middle;background-size: 0.1rem;background-repeat: no-repeat;background-position: 0 50%;}
	.index .anchorIco1{background-image: url(../../../assets/icon/anchor3.png);}
	.index .anchorIco2{background-image: url(../../../assets/icon/anchor1.png);}
	.index .anchorIco3{background-image: url(../../../assets/icon/anchor2.png);}
	.index .yd-tabbar{background-color: #ff5959 !important;height: 0.49rem;}
	.index .yd-tabbar-icon img{width: 0.3rem;height: 0.3rem;}
	.index .slideDown-filter{background-color: #fff;padding: 0.2rem 0px; }
	.index .slideDown-filter li{float: left;width: 33.333333%;text-align: center;}
	.index .slideDown-filter img{width: 0.5rem;height: 0.5rem;display: block;margin: 0rem auto;}
	.index .sf-tit{font-size: 0.16rem;color: #4c4c4c;line-height: 0.16rem;margin-top: 0.15rem;}
	/* .index .eject{} */
	.index .ejectHead{height: 1.7rem;background-color: #ff5959;border-top-left-radius: 4px;border-top-right-radius: 4px;text-align: center;}
	.index .ejectHead-tit{font-size: 0.24rem;color: #fff;line-height: 0.24rem;padding: 0.2rem 0px;}
	.index .ejectHead-des{font-size: 0.18rem;color: #fff;line-height: 0.3rem;}
	.index .ejectHead-bot{font-size: 0.12rem;color: #fff;}
	.index .ejectBody{background-color: #fff;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;padding: 0.15rem 0.4rem 0.2rem;}
	.index .invitation span{font-size: 0.16rem;color: #4C4C4C;line-height: 0.16rem;}
	.index .invitation button{font-size: 0.16rem;color: #4C4C4C;line-height: 0.16rem;}
	.index .invitation li{margin-bottom: 0.2rem;}
	.index .invitationBtn{height: 0.5rem;line-height: 0.5rem;border-radius: 4px;font-size: 0.16rem;color: #fff;background-color: #ff5959;display: block;text-align: center;}
	.index .closeBtn{width: 0.36rem;height: 0.36rem;background-image: url(/static/images/closeBtn2.png);background-size: cover;}
	
	
	.slideBody{overflow: hidden;}
	
	.slide-enter-active{
		transition: all ease 0.3s;
		height: 1.21rem;
    }
	.slide-enter{
		height: 0;
	}
	
	.slide-leave-active{
		transition: all ease 0.3s;
		height: 0;
	}
	.slide-leave{
		height: 1.21rem;
	}
</style>